<template>
  <div class="line-main"
       id="box"></div>
</template>

<script>
const echarts = require('echarts')

export default {
  props: {
    value: Array,
    text: String,
    subtext: String
  },
  data() {
    return {
      line_data: [],
      pass: [],
      fail: []
    }
  },
  mounted() {
    this.clean()
    this.showEchats()
  },
  methods: {
    clean() {
      // this.line_data = this.value
      for (let i=0; i<this.value.length; i++){
        this.line_data.push(this.value[i].data_time)
        this.pass.push(this.value[i].pass_count)
        this.fail.push(this.value[i].fail_count)
      }
    },
    showEchats() {
        const myChart = echarts.init(document.getElementById('box'));
        // const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
        const option = {
          grid: {
            left: '1%',
            right: '1%',
            top: '2%',
            bottom: '1%',
            containLabel: true
          },
          tooltip: {
              trigger: 'axis'
          },
          xAxis: [{
              type: 'category',
              data: this.line_data, // 日期
              axisLine: {
                  lineStyle: {
                      color: "#999"
                  }
              }
          }],
          yAxis: [{
              type: 'value',
              splitNumber: 4,
              splitLine: {
                  lineStyle: {
                      type: 'dashed',
                      color: '#DDD'
                  }
              },
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: "#333"
                  },
              },
              nameTextStyle: {
                  color: "#999"
              },
              splitArea: {
                  show: false
              }
          }],
          series: [
              {
                name: '通过',
                type: 'line',
                data: this.pass, // pass
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#A9F387' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                    }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            borderWidth: 10,
                            /*shadowColor: 'rgba(72,216,191, 0.3)',
                            shadowBlur: 100,*/
                            borderColor: "#A9F387"
                        }
                    },
                    smooth: true
          },
              {
                name: '失败',
                type: 'line',
                data: this.fail, // FAIL
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#ff4b4b' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#ef16d9' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                            },
                        shadowColor: 'rgba(72,216,191, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 20
                        }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        borderWidth: 10,
                        /*shadowColor: 'rgba(72,216,191, 0.3)',
                        shadowBlur: 100,*/
                        borderColor: "#A9F387"
                    }
                },
                smooth: true
          }
          ]
        };
        myChart.setOption(option);
      }
  }
};
</script>

<style>
.line-main {
  width: 1230px;
  height: 400px;
  padding: 28px;
  background: #fff;
}
</style>
